<template>
	<view class="wrapper row">
		<view class="top">
			<view class="bg"></view>
			<view class="detail pd_t_30 pd_l_30 pd_b_30">
				<view class="title color-active font-36 font-b pd_b_20">{{details.thirdSpeName}}</view>
				<view class="item row font-28">
					<view class="label color-333">专业代码：</view>
					<view class="color-666">{{details.thirdSpeCode}}</view>
				</view>
				<view class="item row font-28">
					<view class="label color-333">专业门类：</view>
					<view class="color-666">{{details.firstSpeName || ''}}</view>
				</view>
				<view class="item row font-28">
					<view class="label color-333">专业类别：</view>
					<view class="color-666">{{details.secSpeName || ''}}</view>
				</view>
				<view class="item row font-28">
					<view class="label color-333">专业层次：</view>
					<view class="color-666">{{details.specialtyType || ''}}</view>
				</view>
			</view>
		</view>
		<u-tabs-swiper active-color="#2A6AAA" ref="uTabs" :font-size="28" :list="list" :current="current"
			@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		<view class="empety"></view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish"
			class="swipper-wrp">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%">
					<view class="scroll_inner pd_t_20 pd_b_20">
						<view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
							<view class="border"></view>
							<view>专业方向</view>
						</view>
						<view class="u-font-sm pd_t_30 pd_b_30">
							<view class="item pd_b_20 row">
								<view class="label">就业率：</view>
								<view class="content">{{details.specialtyEmployRate || ''}}</view>
							</view>
							<view class="item pd_b_20 row">
								<view class="label">培养方向：</view>
								<view class="content">{{details.culturePath || ''}}</view>
							</view>
							<view class="item pd_b_20 row">
								<view class="label">报考硕士专业：</view>
								<view class="content">{{details.masterSpecialty || ''}}</view>
							</view>
						</view>
						<view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
							<view class="border"></view>
							<view>开设课程</view>
						</view>
						<view class="table" v-if="classNames.length > 1">
							<view class="th bg-f2f2f2 row cont-center flex-around">
								<view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">序号</view>
								<view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">课程名称</view>
							</view>
							<block v-for="(item, index) in classNames" :key="index">
								<view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index % 2 != 0}">
									<view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{index + 1}}</view>
									<view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item}}</view>
								</view>
							</block>
							<view class="color-999 u-font-xs u-padding-20 u-text-center">数据仅供参考，最终以高校公布为准！</view>
						</view>
						<view v-if="classNames.length == 1" class="u-font-sm u-text-center u-p-t-30">
							<block v-if="classNames[0].includes('暂')">
								{{classNames[0]}}
							</block>
							<block v-else>
								<view class="th bg-f2f2f2 row cont-center flex-around">
									<view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">序号</view>
									<view class="td color-active font-24 pd_t_20 pd_b_20 flex-1 u-text-center">课程名称
									</view>
								</view>
								<block v-for="(item, index) in classNames" :key="index">
									<view class="th row cont-center flex-around" :class="{'bg-f2f2f2': index % 2 != 0}">
										<view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{index + 1}}
										</view>
										<view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item}}</view>
									</view>
								</block>
								<view class="color-999 u-font-xs u-padding-20 u-text-center">数据仅供参考，最终以高校公布为准！</view>
							</block>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%">
					<text class="scroll_inner pd_t_20 pd_b_20 color-333 u-font-sm" style="display: block"
						:selectable="true">
						{{details.specialtyDesc}}
					</text>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%" v-if="loginFlag">
					<view class="scroll_inner pd_t_20 pd_b_20">
						<view class="title font-28 color-666 yh_bd_bottom pd_b_20 row">
							<view class="border"></view>
							<view class="flex-1">开设院校</view>
							<!--<navigator url="/pages/explore/zhuanye_school" class="font-24 color-999">更多 ></navigator>-->
						</view>
						<view class="table">
							<view class="th bg-f2f2f2 row cont-center flex-around">
								<view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">专业排名</view>
								<view class="td color-active u-font-sm pd_t_20 pd_b_20 flex-1 u-text-center">院校名称</view>
							</view>
							<block v-if="details.specialtySchoolRelationList.length">
								<view class="th row cont-center flex-around" :key="index"
									v-for="(item, index) in details.specialtySchoolRelationList"
									:class="{'bg-f2f2f2': index % 2 != 0}">
									<view class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">
										{{item.cultureRank || '-'}}</view>
									<view v-if="!item.schoolId"
										class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center">{{item.schoolName}}
									</view>
									<navigator v-if="item.schoolId"
										:url="`/pages/explore/school_info?id=${item.schoolId}`"
										class="td flex-1 u-font-sm pd_t_20 pd_b_20 u-text-center color-active">
										{{item.schoolName}}</navigator>
								</view>
							</block>
							<view v-if="!details.specialtySchoolRelationList.length"
								class="u-padding-20 color-999 u-font-sm u-text-center">暂无信息</view>
						</view>
						<view v-if="details.specialtySchoolRelationList.length"
							class="color-999 text-cent font-20 u-p-b-30 u-p-t-30">数据仅供参考，最终以高校与考试院公布为准！</view>
					</view>
				</scroll-view>
				<go_login v-if="!loginFlag"></go_login>
			</swiper-item>
			<!-- 精彩讨论 -->
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%">
					<view class="tagRecommend" style="width: 270rpx;padding-left: 30rpx">
						<u-tabs active-color="#101010" inactive-color="#a8a8a8" :show-bar="false" font-size="32"
							:list="recommendList" :is-scroll="false" :current="listCurrent" 
							@change="change"></u-tabs>
					</view>
					<u-gap height="2" bg-color="#EEEEEE"></u-gap>
					<view style="margin-top: 20rpx;" v-for="(item,index) in discuList" :key="index">
						<Diary :showMore="true" :user-info="item.compassNormalUser" :info-data="item"
							@like-change="res => likeChange(index, res)" @delete="deleteCallback(index)" :showLine="false" />
					</view>
					<view class="u-p-b-30" v-if="(discuList.length===0 && orderType !=3)">
						<!-- 数据为空时显示 -->
						<empty :showLine="false" :btn-string="'暂无讨论，写一条吧!'"
							:url="isLogin ? '/package/discussion/publish?diaryName='+thirdSpeName : '/package/login/wx_login'" :showDataImg="true"></empty>
					</view>
					<view class="u-flex flex-center" v-else style="height: 80rpx; line-height: 80rpx; color: #999999;">
						<text>没有更多了</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 发布按钮开始 -->
		<view class="fabu" @click="toFabu" v-if="swiperCurrent===3">
			<img src="https://app.zbzedu.com/static/WaChat/icon/forum/publish.png" mode="" />
		</view>
		<!-- 发布按钮结束 -->
		<view class="" v-if="swiperCurrent!=3">
			<view class="select-btn" @click="choose" v-if="isChoose.length===0">选择为我的目标专业</view>
			<view class="select-btn" @click="delChoose" style="background-color:#6BB303;" v-else>已选为我的目标专业</view>
		</view>
	</view>
</template>

<script>
	import {
		request
	} from "../../util/api";
	import {TOAST} from "../../util/util";
	import Diary from '../forum/components/Diary'
	import Empty from "../forum/components/empty"
	import mixins from "./mixins";
	import go_login from "@/components/go_login";
	import {
		CHECK_TOKEN
	} from '../../util/util'
	import {
		getCurrentFullPath
	} from "../../util/util";

	export default {
		mixins: [mixins],
		components: {
			go_login,
			Diary,
			Empty
		},
		onLoad(option) {
			this.getDetail(option.code)
			this.getGlobalData(option.code)
		},
		data() {
			return {
				userData: {},
				newMsgFlag: false,
				firstDiary: {},
				allLikeNum: 0,
				isLogin: CHECK_TOKEN(),
				recommendList: [{
						name: "推荐"
					},
					{
						name: "最新"
					},
					{
						name: "关注"
					}
				],
				current: 0,
				list: [{
						name: '基本信息'
					}, {
						name: '专业介绍'
					}, {
						name: '开设院校'
					},
					{
						name: '精彩讨论'
					}
				],
				tabs: [],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				details: {},
				classNames: [],
				listCurrent:0,
				// 设置该职业
				isChoose:[],
				busineId:"",
				Rid:"",
				thirdSpeName:"",
				orderType:0,
				discuList:[]
				
			}
		},
		methods: {
			toFabu() {
				this.$u.route({
					// 携带参数跳转到发布页面
				   url: '/package/discussion/publish?diaryName=' + this.thirdSpeName,
				})
			},
			// 改变推荐类型
			change(index) {
				this.listCurrent = index
				this.orderType = index + 1
				this.status = 'loading'
				this.pageNum = 1
				this.getDisList()
				this.discuList=[]
			},
			// 点赞
			likeChange(index, data) {
			  const {likeFlag, likeNum} = data
			  this.$set(this.discuList[index], 'likeFlag', likeFlag)
			  this.$set(this.discuList[index], 'likeNum', likeNum)
			},
			// 删除详情
			deleteCallback(index) {
			  this.discuList.splice(index, 1)
			},
			getDetail(code) {
				request({
					url: '/system/wx/CompassSpecialty/getInfoByThirdSpeCode/' + code,
					token: true
				}).then(res => {
					uni.setNavigationBarTitle({
						title: res.data.thirdSpeName || '专业详情'
					});
					if (res.data.specialtySchoolRelationList.length) {
						res.data.specialtySchoolRelationList = res.data.specialtySchoolRelationList.sort(this
							.compare('cultureRank'))
					}
					this.details = res.data
					this.thirdSpeName=res.data.thirdSpeName
					this.busineId=res.data.thirdSpeCode
					this.classNames = res.data.classNames.replace(/^\s+|\s+$/g, '').split(" ")
				})
			},
			// 获取目标专业
			getGlobalData(code){
				let openUrl='/system/compassMajobMine/queryByUserType'
				if(!CHECK_TOKEN()){
					openUrl='/system/compassMajobMine/queryByUserNoType'
				}
				request({
					url:openUrl,
					method:"post",
					data:{
						busineId:code,
						mjType:"2",
						mjUser:uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
					}
				}).then(res=>{
					this.isChoose=res.data
					if(res.data.length>0){
						this.Rid=res.data[0].id
					}
				})
			},
			// 设置为我的目标专业
			choose(){
				request({
					url:"/system/compassMajobMine/saveMajorJob",
					method:"post",
					data:{
						mjType:"2",
						busineId:this.busineId,
						busineName:this.thirdSpeName,
						mjUser:uni.getStorageSync(process.env.NODE_ENV + 'zbz_user').userId
					}
				}).then((res)=>{
					this.getGlobalData()
					TOAST('选择成功')
				})
			},
			// 获取专业讨论信息
			getDisList() {
				let openUrl='/system/CompassDiary/wxDiaryList'
				if(!CHECK_TOKEN()&& this.orderType!=3)[
					openUrl='/system/CompassDiary/wxDiaryNoList'
				]
				request({
					url: openUrl,
					method: "post",
					data: {
						typeCode: this.orderType,
						typeName:this.thirdSpeName
					}
				}).then(res=>{
					this.discuList=res.rows
				})
			},
			// 删除我的目标专业
			delChoose(){
				request({
					url:"/system/compassMajobMine/deleteMajorjob/" + this.Rid,
					method:"delete",
				}).then(res=>{
					TOAST("取消成功")
					this.isChoose=[]
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if(this.swiperCurrent===3){
					this.getDisList()
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},

			compare(property) {
				return function(a, b) {
					var value1 = a[property];
					var value2 = b[property];
					if (value2 == '-') {
						value2 = Infinity
					}
					return value1 - value2;
				}
			}
		},
		onShareAppMessage(res) {
			return {
				path: getCurrentFullPath()
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		flex-direction: column;
		height: 100%;

		.top {
			position: relative;

			.bg {
				background-image: linear-gradient(rgb(39, 148, 217), rgb(156, 210, 244));
				height: 260upx;
				border-radius: 0 0 100upx 100upx;
				position: absolute;
				top: 0;
				left: 0;
				z-index: -1;
				width: 100%;
			}

			.detail {
				width: 90%;
				margin: 0 auto;
				box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.4);
				border-radius: 16upx;
				z-index: 10;
				background: #fff;
				margin-top: 20upx;

				.title,
				.item {
					z-index: 1;
				}
			}
		}

		.empety {
			height: 20upx;
			background: #f7f7f7;
		}

		.swipper-wrp {
			flex: 1;

			.scroll_inner {
				width: 92%;
				margin: 0 auto;

				.title {
					.border {
						width: 4px;
						background: #1f476d;
						margin-right: 20upx;
					}
				}

				.item {
					.label {
						width: 185upx;
						text-align: right;
					}

					.content {
						flex: 1;
					}
				}
			}
		}
	}

	.select-btn {
		width: 95%;
		height: 46px;
		line-height: 46px;
		line-height: 46px;
		margin: 20rpx auto;
		border-radius: 23px;
		color: #fff;
		font-weight: bold;
		font-size: 18px;
		background: rgba(42, 108, 172, 100);
		text-align: center;
	}
	.fabu {
		position: fixed;
		right: 28rpx;
		bottom: 130rpx;
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		height: 120rpx;
		z-index: 10;
	
		image {
			width: 100%;
			height: 100%;
		}
	}
</style>
